<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<canvas id="mycanvas" width="400px" height="400px" style="border: 1px solid #000000"></canvas>

</body>
</html>

<script type="text/javascript">
	var canvas = document.getElementById("mycanvas");
	var context = canvas.getContext("2d");
	context.fillStyle="#eeeeef";
	context.fillRect(0,0,400,400);
	for (var i = 1;i <= 10; i++) {
		context.beginPath();
		context.fillStyle="rgba(255,0,0,0.25)";
		context.arc(i*25,i*25,i*10,Math.PI,2*Math.PI);
		context.closePath();
		context.fill();
		context.strokeStyle="#47823f"
		context.stroke();
	}
</script>